<template>
  <el-upload
    class="avatar-uploader"
    action=""
    :http-request="handleRequest"
    :show-file-list="false"
    v-loading="loading"
  >
    <img
      v-if="imageUrl"
      :src="imageUrl"
      class="avatar"
      :style="style"
    >
    <i
      v-else
      class="el-icon-plus avatar-uploader-icon"
      :style="lineStyle"
    ></i>
  </el-upload>
</template>

<script>
import { storage } from '@/api/file'
export default {
  name: 'ImageUpload',
  props: {
    url: {
      type: String,
      default: ''
    },
    size: {
      type: Number,
      default: 150
    }
  },
  data () {
    return {
      imageUrl: '',
      loading: false
    }
  },
  computed: {
    style () {
      return `width:${this.size}px;height:${this.size}px;`
    },
    lineStyle () {
      return `${this.style};line-height:${this.size}px;`
    }
  },
  methods: {
    reset () {
      console.log(this.imageUrl)
      this.imageUrl = this.url
    },
    // 上传文件
    handleRequest (params) {
      const { file } = params
      this.handleStorge(file)
    },
    // 上传头像
    async handleStorge (file) {
      this.loading = true
      const { data } = await storage(file, 1)
      this.loading = false
      this.imageUrl = data
      console.log(data)
      this.$emit('upload', data)
    }
  }
}
</script>

<style>
.avatar-uploader {
  display: inline-block;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
.avatar {
  display: block;
}
</style>
